<template>
	<view class="list_inner_view flex-start" :class="small===true?'listHeight paddinglr-30':'p_margin'">
		<view class="flex-start" style="align-items: center;min-width:160rpx" id="showtooltips" >
			<view class="base-color" :class="small===true?'listHeight':'alignStyle'">
				<text class="span">{{title}}</text>
				<image v-if="icon" @click="showtooltips=!showtooltips" class="margint-6 width-20 height-28" style="margin-left: 20rpx;" src="../../static/img/whimg.png" mode=""></image>
				<text v-if="isrequire" class="size-14 base-colorgay" style="margin-left: 8rpx;">*</text>
			</view>
			<text v-if="!small"> ：</text>
		</view>
		<view class="list_container">
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script>
	/**
	 * 列表中左右排列的组件
	 * @property {String} title 左侧label标签名
	 * @property {Slot} content Slot带入右侧实际的输入对象 
	 * @example <uni-applist title="被保人姓名" >
			<view slot="content" class="">
				<input placeholder="请输入被保人姓名" type="text" v-model="info.insuredName" />
			</view>
		</uni-applist>
	 */
	export default {
		data() {
			return {
				showtooltips:false,
			};
		},
		props:{
			title: {
				type: String,
				default: ''
			},
			small: {
				type: Boolean,
				default: false
			},
			icon: {
				type: Boolean,
				default: false
			},
			btns: {
				type: String,
				default: ''
			},
			isrequire: {
				type: Boolean,
				default: false
			},
		}
	}
</script>

<style scoped lang="scss">
	.list_inner_view{height: 100rpx;align-items: center;font-size: 28rpx;border-top: 1px solid #D7D7D7;position: relative;}
	.list_inner_view:first-child{border-top: 0!important;}
	.listHeight{height: 80rpx;display: flex;align-items: center;}
	.p_margin{padding-left: 20rpx;margin: 0 30rpx;}
	.alignStyle{text-align: justify;text-align-last: justify;-moz-text-align-last: justify;min-width: 120rpx;height: 100rpx;line-height: 100rpx;}
	.list_container {display: flex; align-items: center;flex-direction: row;justify-content: space-between;flex:1;height: 100%;}
	.alignStyle .span:after{display: inline-block;content: '';overflow: hidden;width: 100%;height: 0;}
</style>
